<template>
    <div>
        <use-table ref="tbl"></use-table>
        <div class="container padding_b_0">
            <div class="dflex_wrap">
                <div class="dflex_vertical_c margin_r_40 margin_b_20">
                    <div class="search_name">姓名：</div>
                    <el-input v-model="req.name" placeholder="请输入" class="search_input" @input="search" clearable></el-input>
                </div>
                <div class="dflex_vertical_c margin_r_40 margin_b_20" v-if="advancedSearch">
                    <div class="search_name">性别：</div>
                    <el-select v-model="req.member_gender" class="search_input" @change="search">
                        <el-option v-for="item in genderOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </div>
                <div class="dflex_vertical_c margin_r_40 margin_b_20" v-if="advancedSearch">
                    <div class="search_name">注册时间：</div>
                    <el-date-picker v-model="searchTime" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" :picker-options="pickerOptions" class="search_start_end_time" @change="search"></el-date-picker>
                </div>
                <el-button size="mini" class="search_btn margin_b_20 margin_r_40" @click="loadData">搜索</el-button>
            </div>
        </div>
        <div class="container use-table">
            <div class="dflex_wrap margin_b_15">
                <div><el-button class="batch_btn padding0 margin_r_15" @click="removes">批量删除</el-button></div>
                <div><el-button class="batch_btn padding0 margin_r_15" @click="edit">新增</el-button></div>
                <!-- <el-button v-if="role == 'admin'" class="add_btn pos_r padding0" icon="iconfont iconxinzeng" @click="handleFileUpload">导入</el-button>
                <el-button class="add_btn pos_r padding0" @click="getExcel">导出</el-button>
                <el-button class="add_btn pos_r padding0" @click="downloadLocalFile">下载模版</el-button> -->
            </div>
            <el-table :height="tblHeight" :data="tableDatas" @selection-change="selectionChange" highlight-current-row>
                <el-table-column type="selection"></el-table-column>
                <el-table-column :property="item.property" :label="item.label" align="center" v-for="(item, index) in tableOptions" :key="index"></el-table-column>
                <el-table-column label="操作" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-tooltip content="修改" placement="top" :hide-after="1000" :enterable="false" effect="light">
                            <el-button type="text" icon="iconfont iconxiangqing1" class="bbb" @click="edit(scope.row)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination :current-page="req.page" :page-sizes="[10, 20, 30, 50, 100]" :page-size="req.rows" layout="total, sizes, prev, pager, next, jumper" :total="tableTotal" @size-change="sizeChange" @current-change="currentChange"></el-pagination>
        </div>
        <!-- 弹框部分 -->
        <el-dialog title="编辑" :visible.sync="dialogVisibleEdit" width="80%">
            <el-form :model="form" ref="ruleForm" :rules="rules" label-width="100px">
                <el-form-item v-for="(item, index) in tableOptions" :key="index" :label="item.label" :prop="item.property"><el-input v-model="form[item.property]" placeholder="请输入"></el-input></el-form-item>
                <el-form-item>
                    <el-button class="confirm_btn" @click="submitForm('ruleForm')">确 定</el-button>
                    <el-button @click="returnPage">返回列表</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { excelToData, dataToExcel } from '@/uni_modules/ml-excel-to-json/jssdk/parseExcel.js'
import schemaData from '../../../uniCloud-aliyun/database/usemall-heZuoKeHu.schema.json'
const __name = 'usemall-heZuoKeHu'
export default {
    data() {
        return {
            mapping: {
                name: '姓名',
                mobile: '电话',
                Reception_time: '接收时间',
                Downlink_content: '下行内容',
                Reply_content: '回复内容',
            },
            dataId: '',
            form: {},
            rules: {
                name: [
                    {
                        required: true,
                        message: '请输入分类名称',
                        trigger: 'blur',
                    },
                ],
            },
            type: 'base64', //base64 转本地下载 file 文件url  其他方法参见 https://www.npmjs.com/package/xlsx 搜索 input type
            //
            advancedSearch: false,
            searchTime: [],
            //
            dialogVisible: false,
            genderOptions: [],
            stateOptions: [],
            hhdata: {
                is_delete: {
                    bsonType: 'int',
                    defaultValue: 0,
                    description: '是否删除 0否 1已删除',
                },
            },
            tableOptions: [],
            uidName: null,
            state: '',
            role: '',
            //
            dialogVisibleEdit: false,
            form: {},
            //
            user: {},
            //
            req: {
                page: 1,
                rows: 10,
                orderby: 'sort asc',
                name: '',
                userId: '',
                begin_time: '',
                end_time: '',
            },
            tblHeight: 0,
            tableDatas: [],
            tableTotal: 0,
            selectDatas: [],
        }
    },
    computed: {
        useData() {
            let boj = schemaData.properties
            // let boj = this.hhdata
            let arr = []
            for (let i in boj) {
                if (boj[i].hide) {
                    delete boj[i]
                } else {
                    arr.push({
                        ...boj[i],
                        property: i,
                    })
                }
            }
            return arr
        },
    },
    async created() {
        this.handelData()
        this.loadData()
    },
    methods: {
        handelData() {
            // console.log(111,this.useData)
            this.tableOptions = this.useData.map((item) => {
                return {
                    label: item.description,
                    property: item.property,
                }
            })
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid, obj) => {
                // 默认获取第一个未验证 form 属性名
                this.$api.set_unvalidated_form_focus(this, obj)
                if (valid) {
                    if (this.form._id) {
                        let id = this.form._id
                        delete this.form._id
                        this.$db[__name].update(id, this.form).then((res) => {
                            if (res.code == 200) {
                                this.loadData()
                                this.$message('操作成功')
                                this.returnPage()
                            }
                        })
                        return
                    }
                    this.$db[__name].add(this.form).then((res) => {
                        if (res.code == 200) {
                            this.loadData()
                            this.$message('操作成功')
                            this.returnPage()
                        }
                    })
                }
            })
        },
        returnPage() {
            this.form = {}
            this.dialogVisibleEdit = false
        },
        edit(row) {
            if (row._id) {
                this.form = row
            } else {
                this.form = {}
            }
            this.dialogVisibleEdit = true
        },
        
        selectionChange(datas) {
            this.selectDatas = datas
        },
        removes() {
            if (this.selectDatas.length <= 0) {
                this.$message('请勾选需要删除的数据')
                return
            }

            let ids = this.selectDatas.map((x) => x._id)

            this.$confirm('此操作将永久删除勾选数据！', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.$db[__name]
                    .where({
                        _id: this.$db.$cmd.in(ids),
                    })
                    .remove()
                    .then((res) => {
                        if (res.code == 200) {
                            this.loadData()
                        }
                    })
            })
        },
        pick(obj, keys) {
            return keys.reduce((acc, key) => {
                if (obj && obj.hasOwnProperty(key)) {
                    acc[key] = obj[key]
                }
                return acc
            }, {})
        },
        async loadData() {
            await this.$db[__name]
                .whereif(this.req.name, {
                    name: new RegExp(this.req.name),
                })
                .whereif(this.req.userId, {
                    userId: this.req.userId,
                })
                .whereif(this.searchTime && this.searchTime.length > 0, {
                    create_time: this.$db.$cmd.gte(this.req.begin_time).and(this.$db.$cmd.lte(this.req.end_time)),
                })
                .totable(this.req)
                .then((res) => {
                    if (res.code == 200) {
                        this.tableDatas = res.datas.rows
                        this.tableTotal = res.datas.total
                    }
                })
        },
        sizeChange(size) {
            this.req.rows = size
            this.loadData()
        },
        currentChange(current) {
            this.req.page = current
            this.loadData()
        },
    },
    updated() {
        if (!this.tblHeight) {
            // this.tblHeight = '500px';
            this.tblHeight = '600px'
        }
    },
}
</script>

<style></style>
